<template>
  <div>
    <Page auto-content-height>
      <Grid table-title="借阅列表">
        <template #web-url="{ row }">
          <span>{{ row.linkPrefix + row.linkUrl }}</span>
        </template>
        <template #toolbar-tools>
          <!-- <Button type="primary" @click="openDrawer({})"> 新增 </Button> -->
        </template>

        <template #books="{ row }">
          <div v-for="(book, index) in row.book" :key="index">
            <Button
              class="activeColor"
              type="text"
              @click="openBookModel(book)"
              >{{ handleBookName(book.bookName) }}</Button
            >
          </div>
        </template>
        <template #action="{ row }">
          <!-- <Button type="link" @click="openDrawer(row)">编辑</Button> -->
          <!-- v-if="row.state == 2" -->
          <Popover title="" placement="bottom">
            <template #content>
              <Button type="link" @click="msgSaveOpen(row)">催促归还</Button>
            </template>
            <Button type="link">更多</Button>
          </Popover>
        </template>
      </Grid>
    </Page>
    <BookModel ref="BookModeRef" />
    <MsgModel ref="MsgModelRef" />
  </div>
</template>

<script lang="ts" setup>
import { Page } from '@vben/common-ui';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { onMounted, ref } from 'vue';
import { formOptions, gridOptions, idKey } from './data/options';
import { Button, Popover, message } from 'ant-design-vue';
import { handleBookName } from '#/utils/tools';
import BookModel from './components/bookModel.vue';
import MsgModel from './components/msgModel.vue';
const BookModeRef = ref<any>(null);
const MsgModelRef = ref<any>(null);

onMounted(() => {
  initData();
});

//  初始化数据
const initData = async () => {};

// 打开书籍详情
const openBookModel = (row: any) => {
  BookModeRef?.value?.open(row);
};

//  表格配置
const [Grid, gridApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
});

//
const msgSaveOpen = (row: any) => {
  MsgModelRef?.value?.open(row);
};
// 删除
const msgSave = async (row: any) => {
  let res: any = await msgSave({ ids: row[idKey.value] });
  console.log(res);
  message.success(res.message);
  gridApi.query();
};
</script>

<style lang="scss" scoped>
.activeColor {
  color: hsl(var(--primary));
}
</style>
